<!--首页-->
<template>
    <scroller
        :on-infinite="loaderMore" no-data-text = "已经到底了"
    >
       <div class="m-issueList">
           <div class="layout-1">
               <div class="item-1" @click="toSearch">
                   <i class="icon-kf_homepage_search"></i><input type="text" :placeholder="placeholder">
               </div>
           </div>
           <div class="layout-2">
               <issuess :issuess="issuseList"></issuess>
           </div>
       </div>
       <div class="m-search"></div>
    </scroller>
</template>

<script>
    import axios from "axios";
    import cgi from "@/common/cgi";
    import issuess from "@/components/issuess.vue";
    export default {
        name: 'IssueList',
        components: {issuess},
        data() {
            return {
                placeholder: 'list问题',
                issuseList: []
            };
        },
        methods:{
            toSearch() {
                this.$router.push({name: 'Search', query: { placeholder: this.placeholder }});
            },
            loaderMore(done) {
                for(var i=0;i<10;i++) {
                    this.issuseList.push(i);
                }
                setTimeout(()=> {done(true);},5000)
            }
        },
    };
</script>

<style scoped lang="scss" type="text/scss">
    @import "./../../scss/mixin";
    @import "./../../scss/variables";
    .m-issueList {
        .layout-1 {
            background-color: $bg-colorC;
            height: px2rem(88);
            padding: px2rem(14) 0;
            text-align: center;
            .item-1 {
                display: inline-block;
                position: relative;
                border-radius: px2rem(200);
                overflow:hidden;
                height: px2rem(60);
                width: px2rem(600);
                background-color: $bg-colorE;
                padding: 0 px2rem(60);
                i {
                    position: relative;
                    top: px2rem(4);
                    display: inline-block;
                    width: px2rem(80);
                    font-size: px2rem(56);
                }
            }
            input {
                position: relative;
                top: px2rem(-10);
                border:none;
                outline:medium;
                background-color: transparent;
                width: px2rem(380);
                height: 100%;
                font-size: px2rem(30);
                color: $f-colorB;
            }
        }
        .layout-2 {
            padding-left: px2rem(32);
        }
    }
</style>

